<template>
  <div class="page" v-if="res">
    <div class="header">
      <h1>{{ $t('道具迁移') }}</h1>
      <p>将你的猴毛/蟠桃从{{ res.currentServer.dec }}迁移到{{ targetServer }}，请谨慎操作！</p>
    </div>
    <div class="content" v-if="res">
      <tab>
        <tab-item selected @on-item-click="item = 1">猴毛</tab-item>
        <tab-item @on-item-click="item = 2">蟠桃</tab-item>
      </tab>
      <div class="panel" v-show="item == 1">
        <div class="item">
          <div class="current">
            <p>当前服务器：{{ res.currentServer.dec }}</p>
            <p>猴毛数量：{{ res.monkeyToken }}</p>
          </div>
          <group gutter="10px" class="input">
            <x-input title="迁移猴毛数量：" type="number" v-model="hairNum"></x-input>
          </group>
          <div class="current">
            <p>今日迁移损耗：{{ res.expend * 100 }}%</p>
            <p>迁移损耗数量：{{ hairNum * res.expend | min }}</p>
          </div>
          <p class="lose" v-if="res.expend > 0">*单次迁移最少损耗为1，损耗将从迁移数量中扣除</p>
          <div class="target">目标服务器：{{ targetServer }}</div>
          <box gap="20px 0px">
            <x-button type="primary" @click.native="transfer(hairNum)" :disabled="hairNum < 1 || hairNum > res.monkeyToken">确认迁移猴毛</x-button>
          </box>
        </div>
      </div>
      <div class="panel" v-show="item == 2">
        <div class="item">
          <div class="current">
            <p>当前服务器：{{ res.currentServer.dec }}</p>
            <p>蟠桃数量：{{ res.peachToken }}</p>
          </div>
          <group gutter="10px" class="input">
            <x-input title="迁移蟠桃数量：" type="number" v-model="peachNum"></x-input>
          </group>
          <div class="current">
            <p>今日迁移损耗：{{ res.expend * 100 }}%</p>
            <p>迁移损耗数量：{{ peachNum * res.expend | min }}</p>
          </div>
          <p class="lose" v-if="res.expend > 0">*单次迁移最少损耗为1，损耗将从迁移数量中扣除</p>
          <div class="target">目标服务器：{{ targetServer }}</div>
          <box gap="20px 0px">
            <x-button type="primary" @click.native="transfer(peachNum)" :disabled="peachNum < 1 || peachNum > res.peachToken">确认迁移蟠桃</x-button>
          </box>
        </div>
      </div>
    </div>
  </div>
</template>

<script>
  import {
    XButton,
    Range,
    Group,
    Cell,
    Tab,
    TabItem,
    XInput,
    Box,
  } from 'vux'
  export default {
    components: {
      Range,
      Group,
      Cell,
      XButton,
      Tab,
      TabItem,
      XInput,
      Box,
    },
    data() {
      return {
        item: 1,
        hairNum: 0,
        peachNum: 0,
        targetServer: '',
        res: null,
        serverId: null
      }
    },
    mounted() {
      this.$nextTick(function() {
        this.initData();
        this.targetServer = this.$route.query.name
        this.serverId = this.$route.query.server
      });
    },
    methods: {
      initData() {
        this.$http
          .get(`/common/serverLocalData`)
          .then(res => {
            if (res.code == 200) {
              this.res = res.result;
            } else {}
          })
          .catch(function(error) {});
      },
      transfer(num) {
        var that = this;
        var item = this.item == 1 ? '猴毛' : '蟠桃'
        this.$vux.confirm.show({
          title: `迁移 ${item}`,
          content: `
                <p>确认把${item}从${that.res.currentServer.dec}迁移到${that.targetServer}吗?</p>
                <p style="color: red">迁移成功后将不能撤回，请谨慎操作</p>
                `,
          cancelText: '取消',
          confirmText: '迁移',
          onCancel() {
            that.$vux.toast.text('已取消')
          },
          onConfirm() {
            that.transferConfirm(num)
          }
        })
        
      },
      transferConfirm(num) {
        this.$http
          .post(`/common/transferOutServer`, {
            serverId: this.serverId,
            num: num,
            goods: this.item
          })
          .then(res => {
            this.$vux.toast.text(res.msg)
            if (res.code == 200) {
              this.hairNum = 0;
              this.peachNum = 0;
              this.initData();
            } else {}
          })
          .catch(function(error) {});
      }
    }
  }
</script>

<style lang="scss" scoped>
  .header {
    padding: 20px 0;
    text-align: center;
    h1 {
      font-size: 20px;
    }
    p {
      font-size: 12px;
      padding: 0 12px;
    }
  }
  .content {
    .current {
      background: #f1f1f1;
      font-size: 14px;
      padding: 5px 10px;
      border-radius: 5px;
    }
    .target {
      text-align: center;
      background: #f1f1f1;
      margin-top: 10px;
      padding: 10px 0;
      border-radius: 5px;
    }
  }
  .panel {
    margin-top: 15px;
  }
  .input {
    margin-bottom: 10px;
  }
  .lose {
    font-size: 12px;
    color: $grey;
    padding: 0 8px;
  }
</style>

<style lang="scss">
  .content {
    .panel {
      .weui-cells {
        border-radius: 5px;
        border: 1px solid #ccc;
        &:after {
          display: none;
        }
        &:before {
          display: none;
        }
      }
    }
  }
</style>

